<template>
	<view class="custom-navbar" :style="navbarStyle">
		<view class="navbar-content">
			<!-- 左侧区域 -->
			<view class="navbar-left" @click="handleBack" v-if="showBack">
				<text class="back-icon"><</text>
			</view>
			<view class="navbar-left" v-else>
				<slot name="left"></slot>
			</view>
			
			<!-- 标题区域 -->
			<view class="navbar-center">
				<text class="navbar-title">{{title}}</text>
			</view>
			
			<!-- 右侧区域 -->
			<view class="navbar-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomNavbar',
		props: {
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 是否显示返回按钮
			showBack: {
				type: Boolean,
				default: true
			},
			// 返回按钮文字
			backText: {
				type: String,
				default: '返回'
			},
			// 背景颜色
			backgroundColor: {
				type: String,
				default: 'rgba(255, 255, 255, 0.95)'
			},
			// 是否固定在顶部
			fixed: {
				type: Boolean,
				default: true
			},
			// 是否显示底部边框
			showBorder: {
				type: Boolean,
				default: true
			},
			// 自定义返回事件
			customBack: {
				type: Function,
				default: null
			}
		},
		computed: {
			navbarStyle() {
				return {
					backgroundColor: this.backgroundColor,
					position: this.fixed ? 'fixed' : 'relative',
					borderBottom: this.showBorder ? '1rpx solid var(--theme-border, #E0F0E0)' : 'none'
				}
			}
		},
		methods: {
			// 处理返回事件
			handleBack() {
				if (this.customBack) {
					this.customBack()
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
				
				// 触觉反馈
				uni.vibrateShort()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../uni.scss';
	
	.custom-navbar {
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding-top: var(--status-bar-height);
		transition: all 0.3s ease;
	}
	
	.navbar-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
	}
	
	.navbar-left {
		display: flex;
		align-items: center;
		gap: 10rpx;
		cursor: pointer;
		padding: 10rpx;
		border-radius: 10rpx;
		transition: all 0.3s;
		min-width: 120rpx;
		
		&:hover {
			background: var(--theme-bg-tertiary, #F5F5F5);
		}
		
		&:active {
			transform: scale(0.95);
		}
	}
	
	.back-icon {
		font-size: 36rpx;
		color: var(--theme-primary, #90EE90);
		font-weight: bold;
		line-height: 1;
	}
	
	.back-text {
		font-size: 28rpx;
		color: var(--theme-primary, #90EE90);
		font-weight: 500;
		line-height: 1;
	}
	
	.navbar-center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: 400rpx;
		overflow: hidden;
	}
	
	.navbar-title {
		font-size: 32rpx;
		font-weight: 600;
		color: var(--theme-text-primary, #2F4F4F);
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.navbar-right {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 15rpx;
		min-width: 120rpx;
		justify-content: flex-end;
	}
	
	/* 适配不同主题 */
	:root[data-theme="classic"] .custom-navbar {
		background: rgba(248, 248, 220, 0.95);
	}
	
	:root[data-theme="forest"] .custom-navbar {
		background: rgba(240, 255, 240, 0.95);
	}
	
	:root[data-theme="autumn"] .custom-navbar {
		background: rgba(255, 248, 220, 0.95);
	}
	
	:root[data-theme="winter"] .custom-navbar {
		background: rgba(240, 248, 255, 0.95);
	}
	
	:root[data-theme="sakura"] .custom-navbar {
		background: rgba(255, 240, 245, 0.95);
	}
	
	:root[data-theme="mint"] .custom-navbar {
		background: rgba(240, 255, 255, 0.95);
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.navbar-content {
			padding: 0 20rpx;
		}
		
		.navbar-left,
		.navbar-right {
			min-width: 80rpx;
		}
		
		.navbar-center {
			max-width: 300rpx;
		}
		
		.navbar-title {
			font-size: 30rpx;
		}
		
		.back-text {
			display: none; // 小屏幕隐藏返回文字
		}
	}
</style>
